'use client'
import React, {ReactElement, useState, useEffect} from "react"
import styles from "./index.module.scss"
import address from "../../../public/address.json"



interface HeaderProps{
  className?: string
  title:string
  onClose: () => void
}

const Header: React.FC<HeaderProps> = ({className = '', title, onClose}) => {
  return(<div className={`${styles["header-component"]} ${className}`}>
      <div className={`${styles["header-title"]}`}>
          {title}
      </div>
      <div className={`${styles["header-close"]}`}>
          <i className="fa fa-solid fa-close" onClick={() => onClose()}></i>
      </div>
  </div>)
}


interface FoolterProps{
  className?: string
  onCancel: () => void
  onOk: () => void
}
const Foolter: React.FC<FoolterProps> = ({className = '', onCancel, onOk}) => {
  return(<div className={`${styles["foolter-component"]} ${className}`}>
      <div className={`${styles["foolter-content"]}`}>
          <div className={`${styles["foolterCancel"]}`} onClick={() => onCancel()}>取消</div>
          <div className={`${styles["foolterOK"]}`} onClick={() => onOk()}>确定</div>
      </div>
  </div>)
}




interface InfoProps{
  pro: Item,
  city: Item,
  county: Item
}
interface SelectCityProps{
  className?: string
  data: InfoProps | {}
  onClose: () => void
  onOk: (data: any) => void
}
interface LocalProps{
  className?: string
  current?: {
    code: string
    name: string
  } | {[key:string]: any}
  localItem: {
    code: string
    name: string
    children? :Array<{
      ode: string
      name: string}
      >
  }
  clickHandle: (localItem: LocalProps["localItem"]) => void
}
const Local:React.FC<LocalProps> = ({className = "", localItem, current, clickHandle}) => {
  return(<div className={`${styles["local-component"]} ${current?.code === localItem.code ? styles["active-item"] : ''} `} onClick={() => clickHandle(localItem)} >
      { localItem.name}
  </div>)
}

interface Item {
  code: string
  name: string
}
const SelectCity : React.FC<SelectCityProps>= ({className = "", data, onClose, onOk}) => {
  
  const [city, setCity] = useState<Array<any>>([]);
  const [currentPro, setCurrentPro] = useState<Item>()
  const proItemClick = (localItem: LocalProps["localItem"]) => {
    const {code, name} = localItem
    setCurrentPro({code, name})
    if(Array.isArray(localItem.children)){
      setCity(localItem.children)     
    } else {
      setCity([]) 
    }
    setCounty([])
    setCityCurrent({})
    setCountyCurrent({})
  }

  const [county, setCounty] = useState<Array<any>>([]);
  const [cityCurrent,setCityCurrent ] = useState<Item | object>()

  const cityItemClick = (localItem: LocalProps["localItem"]) => {
    const {code, name} = localItem;
    setCityCurrent({code, name})
    if(Array.isArray(localItem.children)){
      setCounty(localItem.children)
      setCountyCurrent({})
    }
  }

  const [countyCurrent,setCountyCurrent ] = useState<Item | object>()
  const countyItemClick = (localItem: LocalProps["localItem"]) => {
    const {code, name} = localItem;
    setCountyCurrent({code, name})
  }

  useEffect(() => {
    if(Object.keys(data).length){
      const { pro, city, county }  = data as InfoProps;
      // const addres : Array<"county" | "city" | "pro">= ["county", "city", "pro"];
      let keys = Object.keys(data);
      keys.forEach((k) => {
        if(k === "pro"){ // 省
          const {children}  = address.find(item => item.code === pro.code) || {}
          const city = children || []
          setCurrentPro(pro)
          setCity(city)
          // setCounty([])
          // setCityCurrent({})
          // setCountyCurrent({})
        }
        if(k === "city"){ //  市
          setCityCurrent(city)
          const {children}  = address.find(item => item.code === pro.code) || {}
          const {children: c}  = children?.find(item => item.code === city.code) || {}
          const count = c || []
          setCounty(count)
          // setCountyCurrent({})
        }
        if(k === "county"){ // 区
          setCountyCurrent(county)
        }
      })
    }
  }, [data])

  const onsubmit = () => {
    const data = {
      pro: currentPro,
      city: cityCurrent,
      county: countyCurrent
    }
    onOk(data)
    onClose();
  }

  return (<div className={`${styles["selectCity-component"]} ${className}`}>
    <div className={`${styles["header"]}`}>
        <Header title="选择省市区" onClose={() => onClose()} />
    </div>
    <div className={`${styles["pro-city-county"]}`}>
      <div className={`${styles["pro"]}`}>
        {
          address.map((local:any, i:number) =><Local key={i} localItem={local} clickHandle={proItemClick} current={currentPro}/> )
        }
      </div>
      <div className={`${styles["city"]}`}>
        {
          city.map((local:any, i:number) =><Local key={i} localItem={local} clickHandle={cityItemClick} current={cityCurrent}/> )
        }
      </div>
      <div className={`${styles["county"]}`}>
      {
          county.map((local:any, i:number) =><Local key={i} localItem={local} clickHandle={countyItemClick} current={countyCurrent}/> )
        }
      </div>
    </div>
    <div className={`${styles["foolter"]}`}>
        <Foolter onCancel={() => onClose()} onOk={() => onsubmit()}/>
    </div>
  </div>)

}


export default SelectCity